'use strict'
import React from 'react'
import style from './css.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      luckBless: [
        {
          num: '1',
          getBless: ['6元优惠券', '随机10-100金币'],
          isGet: serverData.receiveState[0]
        },
        {
          num: '3',
          getBless: ['18元优惠券', '随机100-300金币'],
          isGet: serverData.receiveState[1]
        },
        {
          num: '6',
          getBless: ['免邮券', '18元优惠券', '随机300-600金币'],
          isGet: serverData.receiveState[2]
        },
        {
          num: '10',
          getBless: ['免邮券', '18元优惠券', '随机600-1000金币', '1.6米粉红豹或任意3款娃娃大礼包'],
          isGet: serverData.receiveState[3]
        },
      ],
      filling: [
        {num: '累计充值6元'},
        {num: '累计充值36元'},
        {num: '累计充值280元'},
        {num: '累计充值680元'},
        {num: '累计充值1280元'},
      ],
      play: [
        {num: '上机1局'},
        {num: '累计上机10局'},
        {num: '累计上机30局'},
        {num: '累计上机50局'},
        {num: '累计上机80局'},
      ],
    }
  }

  componentDidMount() {

  }

  transferMsg(msg) {
    this.setState({
      luckBless: msg,
    });
  }

  render() {
    return (
      <div className={style.all}>
        <div className={style.box}>
          <div className={style.banner}>
            <span>3月14日-3月18日</span>
          </div>
          <div className={style.activeState}>
            <div className={style.stateTitle}></div>
            <div className={style.stateText}>
              <div>活动期间，<i>每天</i>只要达成不同的游戏目标，就可以获得相应的<i>告白福袋</i></div>
              <div><i>告白福袋</i>一共有4个，每天只要分别累计完成1、3、6、10个游戏任务目标，就能分别开启对应的福袋，获得丰厚奖励。<i>福袋</i>里有布朗熊可妮兔CP大玩偶、随机金币奖励、免邮券、充值优惠券等超值奖品哦！
              </div>
              <div>充值优惠券不适用周卡、月卡</div>
              <div>免邮券、充值优惠券：实时发放，有效期截止时间为发放后隔天24点</div>
              <div>实体奖品的发放：3月19日起7个工作日内发货</div>
              <div>每天的游戏任务目标完成情况，会在每天0点清零重新统计计算</div>
              <div>本活动请更新至开心抓娃娃 <i>2.2.0版本</i> 进行参与</div>
            </div>
            <div className={`${style.stateTitle} ${style.stateTitle2}`}></div>
            <GoodBless luckBless={this.state.luckBless}
                       transferMsg={msg => this.transferMsg(msg)}
            />

            <div className={style.stateTitle3}></div>
            <div className={style.goPlay}>
              <FillingList filling={this.state.filling}/>
              <PlayList play={this.state.play}/>
            </div>
          </div>
          <div className={style.state}>本平台保留对本活动的最终解释权</div>
        </div>
      </div>
    )
  }
}

function PlayList(props) {
  const filling = props.play;
  const isFinish = serverData.play;

  function _handleClick(index) {
    // console.log(index);
    if (serverData.islogin) {
      var json = {method: 'close'}
      var jsonString = JSON.stringify(json)
      prompt('__native_call=>' + jsonString)
    } else {
      window.location.href = serverData.download
      return;
    }
  }

  const list = filling.map((item, index) =>
    <div className={`${style.filling} ${style.play} ${isFinish[index].isPlay ? style.playGet : ''}`}
         key={index}
         onClick={(e) => _handleClick(index)}>
      <div className={style.listIcon}></div>
      <span className={style.fontWeight}>{item.num}</span>
      <span>{isFinish[index].isPlay ? '已完成' : '去完成 >'}</span>
    </div>
  )
  return (
    <div className={`${style.fillingList} ${style.playList}`}>
      {list}
    </div>
  )
}

function FillingList(props) {
  const filling = props.filling;
  const isFinish = serverData.filling;

  // console.log(isFinish)

  function handleClick(index) {
    // console.log(index);
    if (serverData.islogin) {
      prompt('__native_call=>' + JSON.stringify({
        method: 'reqNative',
        modul: 'charge',
        action: 'charge'
      }))
    } else {
      window.location.href = serverData.download
      return;
    }
  }


  const list = filling.map((item, index) =>
    <div className={`${style.filling} ${isFinish[index].isFinish ? style.fillingGet : ''}`}
         key={index}
         onClick={(e) => handleClick(index)}
    >
      <div className={style.listIcon}></div>
      <span className={style.fontWeight}>{item.num}</span>
      <span>{isFinish[index].isFinish ? '已完成' : '去完成 >'}</span>
    </div>)
  return (
    <div className={style.fillingList}>
      {list}
    </div>
  )
}

function GoodBless(props) {
  let data = props.luckBless;

  function getGoodBless(num, isGet, i) {
    let _data = props.luckBless
    const url = `/v1/activity/doll/2018314/activity${window.location.search}&missioncnt=${num}`
    if (serverData.islogin) {
      if (isGet == 2) {
        _data[i].isGet = 1;
        props.transferMsg(_data)
        fetch(url, {method: 'POST'})
          .then(res => {
            console.log(res)
            console.log(res.data)
            _data[i].isGet = 1;
            props.transferMsg(_data)

            console.log('err' + res.err)
            console.log('err1' + res.data.err)
            if (res.err == 0) {
              console.log('err0')
            }
            if (res.err == '0') {
              console.log('err1')
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
    } else {
      window.location.href = serverData.download
      return;
    }
  }

  const list = data.map((item, index) =>
    <div className={style.goodBless}
         key={index}>
      <div className={`${style.blessIcon} ${item.isGet == 2 ? style.swing : ''}`}></div>
      <div className={style.inside}>
        <div className={style.leftRegion}>
          <span>{index == 0 ? '完成任意' : '累计完成'} <i>{item.num}</i> 个游戏目标</span>
          <span>{item.getBless[0]}</span>
          <span>{item.getBless[1]}</span>
          <span>{item.getBless[2]}</span>
          <span>{item.getBless[3]}</span>
        </div>
        <div
          className={`${style.rightRegion} ${item.isGet == 0 ? style.rightRegion2 : item.isGet == 2 ? style.rightRegion1 : ''}`}
          onClick={(e) => getGoodBless(item.num, item.isGet, index)}
        >{item.isGet == 1 ? '已领取' : '领取奖励'}</div>
      </div>
    </div>
  )
  return (<div className={style.blessList}>
    {list}
  </div>)
}

export default App
